<template>
  <div class="my">
    <div class="top">
        <img v-if="isLogin" :src="userInfo.avatar">
        <img v-else src="">
        <h2 v-if="isLogin">{{userInfo.username}}</h2>
        <h2 v-else @click='loginFn'>点击登陆</h2>
        <van-icon v-if='isLogin' name="cross" @click='exit'/>
        <van-icon v-else name="arrow"  @click='loginFn'/>
    </div>
    <div class="main">
        <van-grid :column-num="3" :border=false>
          <van-grid-item
            v-for="item in gridArr"
            :key="item.id"
            :icon="item.icon"
            :text="item.type"
          />
        </van-grid>
    </div>
    <!-- 遮罩 -->
    <van-overlay :show="show" @click="show=false">
    </van-overlay>
    <!-- 登陆 -->
      <van-form v-if='show' @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 20px 30px 0;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    
  </div>
</template>

<script>
import {getLoginDate} from '@/utils/http';
export default {
    name:'My',
    data() {
      return {
        show:false,//遮罩层显示
        isLogin:false, //是否登陆
        gridArr: [
            // grid数组
            { id: 0, icon: "label-o", type: "我的订单" },
            { id: 1, icon: "bill-o", type: "优惠券" },
            { id: 2, icon: "goods-collect-o", type: "礼品卡" },
            { id: 3, icon: "location-o", type: "我的收藏" },
            { id: 4, icon: "flag-o", type: "我的足迹" },
            { id: 5, icon: "contact", type: "会员福利" },
            { id: 6, icon: "aim", type: "地址管理" },
            { id: 7, icon: "warn-o", type: "账号安全" },
            { id: 8, icon: "service-o", type: "联系客服" },
            { id: 9, icon: "question-o", type: "帮助中心" },
            { id: 10, icon: "smile-comment-o", type: "意见反馈" },
            ], // 我的导航列表
        username:'',
        password:'',
        userInfo:[] //用户信息
      }
    },
    mounted(){
      // 判断token用户登录
      if(sessionStorage.getItem('token')){
        this.isLogin=true
        // 获取用户信息显示
        this.userInfo=JSON.parse(sessionStorage.getItem('userInfo'))

      }else{this.isLogin=false}

    },
    methods:{
      loginFn(){
        this.show=true
      },
      // 登陆
      onSubmit(values){
        getLoginDate({username:values['用户名'],pwd:values['密码']}).then(res=>{
          // 弹出成功提示框
          this.$toast.success('登陆成功')
          this.show=false
          // token，userInfo存本地
          sessionStorage.setItem('token',JSON.stringify(res.data.token))
          sessionStorage.setItem('userInfo',JSON.stringify(res.data.userInfo))
          // 刷新
            this.$router.go(0)
            this.$router.back()
        })
      },
      // 退出
      exit(){
        this.$dialog.confirm({
          title: '退出登录',
          message: '您确定要退出登录嘛',
        }).then(() => {
            // 清除本地存储
            sessionStorage.clear()
            // 刷新
            this.$router.go(0)
          })
      }
    }
}
</script>

<style lang='less' scope>
.my{
   height: 100%;
   padding-bottom: 50px;
    .top{
      background: #333;
      color: #fff;
      padding: 20px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
        img{
            border-radius: 50%;
            margin-right: 20px;
            width: 70px;
        }
      h2{
        font-size: 100%;
        font-weight: normal;
        flex:1
      }
    }
    .van-grid-item {
      margin: 20px 0;
    }
    .van-form{
      position: absolute;
      width: 90%;
      padding: 30px 0;
      z-index: 99;
      top: 50%;
      left: 50%;
      background: white;
      transform: translate(-50%,-50%);
   }
  }
</style>